<template>
  <div class="form-layout">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor
        :itemList="[
          { name: 'box-base', title: '基础信息' },
        ]"
      />
    </div>
    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <customForm :data="form" :rules="propRules" ref="editForm" :disabled="propReadonly">
        <template #content>
          <div id="box-base" class="box-title">基础信息</div>
          <customFormItem
            label="供应商"
            name="supplierId"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.selectStatic.name"
            :config="{ key: 'id', label: 'name', value: 'id', options: propDictionaries.supplierId }"
          />
          <customFormItem label="人员名称" name="name" :parent="_self" :form="form"  @change="changePy" />
          <customFormItem label="助记码" name="namePy" :parent="_self" :form="form" />
          <customFormItem
              label="有效标识"
              name="flagActive"
              :parent="_self"
              :form="form"
              :type="constCommon.formItemType.switch.name"
            />
          <customFormItem label="备注" name="remark" :parent="_self" :form="form"  />
        </template>
      </customForm>
    </div>
  </div>
</template>

<script>
import customAnchor from '@/components/custom/form/customAnchor.vue'

export default {
  data() {
    return {
      form: {},
      viewData: {},
      supplierList: []
    }
  },
  created() {
    this.$emit('event-register', {
      validate: (callback) => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        this.$set(this.form, 'id', this.form.id)
      },
      afterSave: () => {
      },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {
      },
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {
      },
      beforeClose: () => {
        return true
      }
    })
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propReadonly: Boolean,
    propStatus: String,
    propRules: Object
  },
  components: {
    customAnchor
  },
  computed: {
    flagActive: {
      get() {
        return this.form.flagActive == 1
      },
      set(value) {
        this.form.flagActive = (value == true ? 1 : 0)
      }
    }
  },
  methods: {
    changePy() {
      this.form.namePy = this.pyutils.getAllFirstLetter(this.form.name)
    }
  }
}
</script>
